<template>
  <div class="home-container animate__animated animate__fadeIn">
    <div class="header">
      <nav-header />
      <banner />
    </div>
    <div class="content">
      <game-content />
      <game-information />
      <game-ranking />
    </div>
    <my-footer />
    <back-top :isHome="true" />
  </div>
</template>

<script setup>
import banner from "./components/banner";
import gameContent from "./components/gameContent";
import gameInformation from "./components/gameInformation";
import gameRanking from "./components/gameRanking.vue";
import navHeader from "@/components/public/navHeader";
import backTop from "@/components/public/backTop";
import myFooter from "@/components/public/myFooter.vue";
</script>

<style scoped lang="less">
.home-container {
  position: relative;
  .content {
    width: 100vw;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    // background-color: rgb(27, 41, 57);
  }
}
</style>
